<!DOCTYPE html>
<html>
<head>
	<title>HUATHY-skyDrive</title>
	<link rel="stylesheet" type="text/css" href="../css/basic.css">
	<link rel="stylesheet" type="text/css" href="../layui/css/layui.css">
	<script type="text/javascript" src="../js/jquery-3.4.1.js"></script>
	<script type="text/javascript" src="../js/layer.js"></script>
</head>
<body>
<header id="header" class="header">
	<h1>HUATHY-skyDrive</h1>
	<hr>
</header>


<div class="layui-container" id="controll">  
<div class="layui-row">
	<div class="layui-col-xs6 layui-col-sm2 layui-col-md2">
		当前用户 : <span id="user">未登录</span>
	</div>
	<div class="layui-col-xs12 layui-col-sm6 layui-col-md6">
		<form id="uploadForm">
			<input type="file" name="file" id="file">
			<input id="uid" name="uid" hidden value="0"/>	<!-- 将uid隐藏在这方便后边一起将数据提交服务器 -->
			<button type="button" id="fileUploadBtn" class="layui-btn layui-btn-warm">上传资源</button>
		</form>
	</div>
	<div class="layui-col-xs6 layui-col-sm4 layui-col-md4">
		<button id="showLoginBtn" class="layui-btn layui-btn-normal">登录</button>
	</div>
</div>
</div>

<span style="text-align:center;"><h1>——资源列表——</h1></span>
<table class="layui-table" id="fileTable">
	<thead>
		<tr>
			<th>文件名称</th>
			<th>点击下载-文件预览</th>
			<th>文件大小</th>
			<th>上传者</th>
			<th>操作</th>
		</tr> 
	</thead>
	<tbody id="file_tbody">
		
	</tbody>
</table>


<footer id="footer" class="footer">
	<span> 
		<span style="margin-left: 20%;"></span>
	</span>
</footer>

<footer class="layui-container" id="footer">  
<div class="layui-row">
	<div class="layui-col-xs8 layui-col-sm6 layui-col-md6">
		<b>©AUTHOR：HUATHY </b> &emsp;博客地址：<a target="_blank" href="https://blog.csdn.net/qq_40366738">https://blog.csdn.net/qq_40366738</a>
	</div>
	<div class="layui-col-xs4 layui-col-sm6 layui-col-md6">
		本站访问人数 : <span>暂未统计</span>
	</div>
</div>
</footer>
</body>
<script type="text/javascript">
/******** 获取资源信息 ********************************************/
$(function(){
	$.post("../user/checkLogin",null,function(data){
		console.log("ua:"+data.uid);
		if( data.uid > 0 ){
			$("#user").html(data.email);
			$("#uid").val(data.uid);
			layer.closeAll();
		}else{
			showLogin();
		}
	});
	
	var user = $("#user").html();
	if(user==null || user=='' || user=='未登录'){
		showLogin();
	}
	
	$.post('../file/finds',null,function(data){
		console.log(data);
		var str = '';
		$.each(data,function(index,item){
			var path = '../' + item.savepath ;
			
			str += '<tr id="ftr_'+item.fid+'"> <td>'+item.filename+'</td> <td>';
			if('image'==fileType(item.filename)){
				str += '<img style="float:left;height:28px;width=28px;" src="'+ path +'">';
			}else if('audio'==fileType(item.filename)){
				str += '<audio style="float:left;height:28px;width=28px;" controls src="'+ path +'" />';
			}else if('video'==fileType(item.filename)){
				str += '<video style="float:left;height:48px;width=56px;" controls src="'+ path +'" />';
			}else if('pdf'==fileType(item.filename)){
				str += '<a style="float:left;" href="'+ path +'" >PDF点击预览<a/>';
			}else{
				str += '<a style="float:left;" href="'+ path +'" >无法预览\n点击下载<a/>';
			}
			str += '<td>'+(item.size/1024).toFixed(2)+' K</th><th>'+item.email+'</td> ';
			str += '<td><span id="pasSpan_'+item.fid+'">';
			if(item.statu == 0){
				str += '<button onclick="passFile('+ item.fid +')" class="layui-btn layui-btn-xs layui-btn-warm">核准</button>';
			}else{
				str += '<button class="layui-btn layui-btn-xs layui-btn-primary">已核准</button>';
			}
			str += '</span>&ensp;';
			str	+= '<button onclick="delFile('+ item.fid +')" 	class="layui-btn layui-btn-xs  layui-btn-normal">删除</button>';
			str += '</td></tr>';
		});
		$("#file_tbody").html(str);
	},'json');
})

function delFile(fid){
	if(fid==null || fid==''){
		return ;
	}
	
	$.post('../file/del',{fid:fid},function(data){
		data = parseInt($.trim(data));
		if(data > 0){
			layer.msg('操作成功!');
			$('#ftr_'+fid).remove();	//把表格的那一行移除
		}else{
			layer.msg('操作失败！')
		}
	});

}

function passFile(fid){
	if(fid=='' || fid==null){
		return ;
	}
	$.post('../file/pass',{fid:fid},function(data){
		data = parseInt($.trim(data));
		if(data > 0){
			layer.msg('操作成功!');
			$('#pasSpan_'+fid).html('<button class="layui-btn layui-btn-xs layui-btn-primary">已核准</button>');
		}else{
			layer.msg('操作失败！')
		}
	});
}

/***********登录弹出框***************************************/
$("#showLoginBtn").click(function(){
	showLogin();
});
function showLogin(){
	var loginHtml = '<h2><form class="layui-form"  id="loginForm"><div class="layui-form-item"><input hidden name="UA" value="admin">' 
	+ '<input type="text" name="email" id="login_email" lay-verify="required" placeholder="请输入邮箱" autocomplete="off" class="layui-input" style="width:90%;margin-left:6%;margin-top:2%;">' 
	+ '<input type="password" name="pwd" id="login_pwd" lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input" style="width:90%;margin-left:6%;margin-top:2%;">'
	+ '<input type="button" id="loginBtn" onclick="login()" class="layui-btn" value="登录已进入管理页面" style="width:80%;margin-left:4%;margin-top:2%;"/></div></form></h2>';

	//自定义页面
	layer.open({
		type: 1,
		skin: 'layui-layer-demo', //样式类名
		closeBtn: 0, //不显示关闭按钮
		anim: 2,
		shadeClose: true, //开启遮罩关闭
		area: ['100%', '100%'], //宽高
		content: loginHtml
	});
	
}

/***登录的方法****************************************************/
function login(){
	var email = $("#login_email").val();
	var pwd = $("#login_pwd").val();
	if( email=='' || pwd=='' ){
		layer.msg('账号密码不可为空...');
		return;
	}
	
	$.ajax({
		url : '../user/login',
		data : $("#loginForm").serialize(),
		type : 'post' ,
		dataType : 'json' ,
		success : function(data){
			if(data.uid > 0){
				layer.msg('登录成功...');
				$("#user").html(data.email);
				$("#uid").val(data.uid);
				layer.closeAll();
			}else {
				layer.alert('登录失败! 账号或密码错误..', {
					icon: 5,
					skin: 'layer-ext-moon' //该皮肤由layer.seaning.com友情扩展。关于皮肤的扩展规则，去这里查阅
				})
			}
		},
		error : function(data,status,e){
			layer.msg("登录失败\n e:"+e);
		}
	});
}


/*********封装文件格式判断**************************************************************************/
function fileType(filePath){
	//获取最后一个.的位置
	var index= filePath.lastIndexOf(".");
	//获取后缀
	var ext = filePath.substr(index+1);

	//判断是否是视频类型
	if(['mp4','avi','mov','rmvb','rm','flv','3gp'].indexOf(ext.toLowerCase()) != -1){
		return 'video';
	}
	//判断是否是图片类型
	if(['png', 'jpg', 'jpeg', 'bmp', 'gif', 'webp', 'psd', 'svg', 'jfif'].indexOf(ext.toLowerCase()) != -1){
		return 'image';
	}
	//判断是否是音频类型
	if(['cda','wav','mp3','wmv','flac','aac'].indexOf(ext.toLowerCase()) != -1){
		return 'audio';
	}
	if(['pdf'].indexOf(ext.toLowerCase()) != -1){
		return 'pdf';
	}
	return 'other';
}

</script>
</html>